@using BootstrapBlazor.Components
@namespace Application.Web.Entry.Pages.Components
    <div class="card ann-angle-container" style="border: 1px solid #096bc7 !important;background-color: #b5e1f1;">
        @* <div class="card-header">
            <h5 class="card-title">实时角度</h5>
        </div> *@
        <div class="card-body">
            <!-- ACU实时时间 -->
            <div class="time-display">
                <span class="time-label">ACU实时时间：</span>
                <div class="time-value">@CurrentTime</div>
            </div>

            <div class="separator" style="height: 2px; background: linear-gradient(to right, transparent 0%, #91d5ff 25%, #91d5ff 75%, transparent 100%); margin: 10px 0; background-size: 100% 2.5em; background-repeat: no-repeat; background-position: center;"></div>

            <!-- 大地坐标系 -->
            
            <div class="parameter-section">
                <table style="border-collapse: collapse; border: none; width: 100%; text-align: center;">
                    <thead>
                        <tr>
                            <th>大地坐标系</th>
                            <th>方位</th>
                            <th>俯仰</th>
                            <th>偏移量</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 引导角度行 -->
                        <tr style="border: none;">
                            <td style="border: none;">引导角度</td>
                            <td><div class="cell-value">@AzimuthGuide</div></td>
                            <td><div class="cell-value">@ElevationGuide</div></td>
                            <td><div class="cell-value">A: @OffsetA</div></td>
                        </tr>
                        <!-- 当前角度行 -->
                        <tr style="border: none;">
                            <td style="border: none;">当前角度</td>
                            <td><div class="cell-value">@AzimuthCurrent</div></td>
                            <td><div class="cell-value">@ElevationCurrent</div></td>
                            <td><div class="cell-value">E: @OffsetE</div></td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="separator" style="height: 2px; background: linear-gradient(to right, transparent 0%, #91d5ff 25%, #91d5ff 75%, transparent 100%); margin: 10px 0; background-size: 100% 2.5em; background-repeat: no-repeat; background-position: center;"></div>

            <!-- 转台坐标系 -->
            <div class="parameter-section">
                <table style="border-collapse: collapse; border: none; width: 100%; text-align: center;">
                    <thead>
                        <tr>
                            <th>转台坐标系</th>
                            <th>方位</th>
                            <th>俯仰</th>
                            <th>倾斜</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 命令角度行 -->
                        <tr style="border: none;">
                            <td style="border: none;">命令角度</td>
                            <td><div class="cell-value">@AzimuthCommand</div></td>
                            <td><div class="cell-value">@ElevationCommand</div></td>
                            <td><div class="cell-value">@TiltCommand</div></td>
                        </tr>
                        <!-- 当前角度行 -->
                        <tr style="border: none;">
                            <td style="border: none;">当前角度</td>
                            <td><div class="cell-value">@AzimuthCurrent</div></td>
                            <td><div class="cell-value">@ElevationCurrent</div></td>
                            <td><div class="cell-value">@TiltCurrent</div></td>
                        </tr>
                        <!-- 当前速度行 -->
                        <tr style="border: none;">
                            <td style="border: none;">当前速度</td>
                            <td><div class="cell-value">@AzimuthSpeed</div></td>
                            <td><div class="cell-value">@ElevationSpeed</div></td>
                            <td><div class="cell-value">@TiltSpeed</div></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

